<template>
  <div>
    <a-card size="small" :title="dataType == 'into' ? '转入账单' : '转出账单'">
      <a-table
        :dataSource="dataSource"
        :columns="columns"
        :pagination="false"
        rowKey="id"
      >
        <template #headerCell="{ title, column }">
          <template v-if="column.key === 'amount'">
            {{dataType == 'into' ? '转入金额' : '转出金额'}}
          </template>
        </template>
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'bill_number'">
            <a-button type="link" @click="onBillClick(record)">{{
                text
              }}</a-button>
          </template>
        </template>
      </a-table>
    </a-card>
    <!-- 账单详情 -->
    <BillDetailDrawer
      :visible="billDetailVisible"
      :id="billId"
      @cancel="
        () => {
          billDetailVisible = false;
        }
      "
    />
  </div>
</template>

<script>
import {defineComponent, watch, reactive, toRefs, computed, ref, defineAsyncComponent} from "vue";
import request from "../../../../common/utils/request";
import store from "../../../../store";
import moment from "moment";
import { message } from "ant-design-vue";
const BillDetailDrawer = defineAsyncComponent(() =>
  import("@/views/bill/BillDetail/modules/BillDetailDrawer.vue")
);

export default defineComponent({
  name: "CarryOverDetailTable",
  props: {
    dataType: {
      type: String,
      default: '',
    },
    dataSource: {
      type: Array,
      default: () => [], // 数据源
    }
  },
  components: { BillDetailDrawer },
  setup(props, {emit}) {

    const state = reactive({
      columns: INIT_COLUMNS,
      billId: 0,
      billDetailVisible: false,
    });

    const onBillClick = (record) => {
      state.billId = record?.bill_id;
      state.billDetailVisible = true;
    };

    return {
      ...toRefs(state),
      onBillClick,
    };
  },
});

const INIT_COLUMNS = [
  {
    title: "项目名称",
    dataIndex: "village_name",
    key: 'village_name',
  },
  {
    title: "楼宇名称",
    dataIndex: "build_name",
    key: 'build_name',
  },
  {
    title: "楼层-房号",
    key: "roomInfo",
    dataIndex: "roomInfo",
  },
  {
    title: "对方名称",
    dataIndex: "owner_name",
    key: "owner_name",
  },
  {
    title: "账单编号",
    dataIndex: "bill_number",
    key: "bill_number",
  },
  {
    title: "费用类型",
    key: "cost_type_txt",
    dataIndex: "cost_type_txt",
  },
  {
    title: "计费周期",
    key: 'contractOn',
    dataIndex: 'contractOn',
  },
  {
    key: "amount",
    dataIndex: "amount",
  },
]
</script>

<style lang="less" scoped>
:deep(.ant-table-tbody > tr:last-child td) {
  border-bottom: none;
}
</style>
